<template>
<div id="bigbox">
<h1>留言板</h1>
<ZuJianzi @c="jieshou"/>
<ul id="box">
    <li v-for="(item,index) in arr" :key="index">
        <p>标题：{{item.title}}</p>
        <p>内容：{{item.content}}</p>
        <p>姓名：{{item.name}}</p>
        <button @click="del(index)">删除</button>
    </li>
</ul>
</div>
</template>
<script>
import ZuJianzi from '../components/ZuJianzi.vue'
export default{
    components:{
       ZuJianzi
    },
    data(){
        return{
         arr:[{id:1,title:"111",content:"111",name:"张三"},{id:2,title:"222",content:"222",name:"李四"},{id:3,title:"333",content:"333",name:"王五"},{id:4,title:"444",content:"444",name:"赵六"}],
        }
    },
    methods:{
      jieshou(biaoti,neirong,xingming){
            if(biaoti != "" && neirong != "" && xingming != ""){
                this.arr.push({
                    id:this.arr.length,
                    title:biaoti,
                    content:neirong,
                    name:xingming
                })  
            }else{
                alert("输入不能为空")
            }
      },
    del(index){
        this.arr.splice(index,1)
    }
    },
}
</script>
<style>
#bigbox{
    text-align: center;
}
*{
    padding: 0;
    margin: 0;
}
li{
    list-style: none;
}
#box{
    display: flex;
    width: 500px;
    margin: auto;
}
#box>li{
    width: 200px;
    margin-right: 20px;
}
</style>